<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-lx-cascades"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item> 系统管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/systemRole' }">系统角色</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <span>角色名称：</span>
                <el-input v-model="query.rolename" placeholder="请输入内容" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="search">筛选</el-button>
                <el-button icon="el-icon-delete" @click="clear"></el-button>
            </div>
            <el-button type="primary" @click="handleAdd">新增角色</el-button>
            <el-table :data="tableData" style="width: 100%" max-height="250">
                <el-table-column fixed prop="rolename" label="角色名称" width="width" align="center">
                </el-table-column>
                <el-table-column prop="rolecode" label="角色编码" width="width" align="center">
                </el-table-column>
                <el-table-column prop="createtime" label="创建时间" width="width" align="center">
                </el-table-column>

                <el-table-column label="操作" width="300" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="upUser(scope.$index, scope.row)">用户</el-button>
                        <el-button type="text" @click="upAuthorization(scope.$index, scope.row)">授权</el-button>

                        <el-dropdown split-button type="primary" style="margin-left: 10px;">
                            更多
                            <el-dropdown-menu slot="dropdown">
                                <el-button style="margin-right: 10px;"
                                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button @click="handleDelete(scope.row)">删除</el-button>
                            </el-dropdown-menu>
                        </el-dropdown>


                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
                    :current-page="query.pageNum" :page-sizes="[1, 2, 3, 4]" :page-size="2"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :visible.sync="editVisible" width="50%" :closeOnClickModal="false" @close="cancle">
            <RoleUserPopUp v-if="isUser" :fatherId="fatherId"></RoleUserPopUp>
            <AuthorizationPopUp v-if="isAuthorization" :fatherId="fatherId"></AuthorizationPopUp>
            <RoleDetailPopUp v-if="isEdit" :formObj="formObj"></RoleDetailPopUp>
            <AddRolePopUp v-if="isAdd" :formObj="formObj"></AddRolePopUp>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancle">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
//引入请求
import { selectSystemRoles, updateRoleMenus, updateSystemRole, deleteSystemRole, addSystemRole } from '@/api/systemManager'
import RoleUserPopUp from '@/components/page/SystemManager/dialog/RoleUserPopUp' //用户弹窗
import AuthorizationPopUp from '@/components/page/SystemManager/dialog/AuthorizationPopUp' //权限弹窗
import RoleDetailPopUp from '@/components/page/SystemManager/dialog/RoleDetailPopUp.vue'; //编辑弹窗
import AddRolePopUp from '@/components/page/SystemManager/dialog/AddRolePopUp' //添加弹窗
import bus from '@/components/common/bus';
export default {
    data() {
        return {
            query: {
                pageNum: 1,
                pageSize: 2,
                rolename: '',
            },
            tableData: [],
            pageTotal: 0,
            editVisible: false, //控制弹窗
            isUser: false,  //控制用户
            isAuthorization: false,  //控制授权
            fatherId: '',  //传给user弹窗和授权 发请求要用
            checkArr: [],
            isEdit: false,//控制编辑,
            isAdd: false,
            formObj: {}
        }
    },
    mounted() {
        this.getData()
        //注册事件 为了拿到修改后的数据
        bus.$on('checkArr', (val) => {
            this.checkArr = val
        })
    },
    components: {
        RoleUserPopUp,
        AuthorizationPopUp,
        RoleDetailPopUp,
        AddRolePopUp
    },
    methods: {
        //获取表格数据
        async getData() {
            let result = await selectSystemRoles(this.query)
            if (result.code == 200) {
                this.tableData = result.data.list
                this.pageTotal = result.data.total
            }
        },
        //删除
        async handleDelete(rows) {
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            }).then(async () => {
                let params = {
                    id: rows.id
                }
                let result = await deleteSystemRole(params)
                if (result.code == 200) {
                    this.$message({ message: result.msg, type: 'success' })
                    this.query.pageNum = 1
                    this.getData()
                } else {
                    this.$message({ message: result.msg, type: 'error' })
                }
            })
                .catch(() => { });
        },
        //编辑
        handleEdit(index, row) {
            this.editVisible = true
            this.isEdit = true
            this.formObj = row
        },
        //添加
        handleAdd() {
            this.isAdd = true
            this.editVisible = true
        },
        //保存编辑或添加
        async saveEdit() {
            //提交授权
            if (this.isAuthorization) {
                let arr = Array.from(this.checkArr)

                const paramList = arr.join(', ').replace(/\s/g, '');
                //提交
                // console.log(paramList);
                let result = await updateRoleMenus({ mids: paramList, rid: this.fatherId })
                if (result.code == 200) {
                    this.$message({ message: result.msg, type: 'success' })
                }
            }
            //编辑提交
            if (this.isEdit) {
                let result = await updateSystemRole(this.formObj)
                if (result.code == 200) {
                    this.$message({ message: result.msg, type: 'success' })
                }

            }
            //添加提交
            if (this.isAdd) {
                let result = await addSystemRole(this.formObj)
                if (result.code == 200) {
                    this.$message({ message: result.msg, type: 'success' })
                }
            }
            this.getData()
            this.cancle()
        },
        //页码改变时
        handlePageChange(val) {
            this.query.pageNum = val
            this.getData();
        },
        //一页大小改变时
        handleSizeChange(val) {
            this.query.pageSize = val
            this.getData();
        },
        //弹出用户弹窗
        upUser(index, row) {
            this.editVisible = true
            this.isUser = true
            this.fatherId = row.id

        },
        //弹出授权弹窗
        upAuthorization(index, row) {
            this.editVisible = true
            this.isAuthorization = true
            this.fatherId = row.id
        },
        //取消按钮
        cancle() {
            this.editVisible = false
            this.isUser = false
            this.isAuthorization = false
            this.isEdit = false
            this.isAdd = false
            this.formObj = {}
        },
        async search() {
            this.query.pageNum = 1
            let result = await selectSystemRoles(this.query)
            if (result.code == 200) {
                this.tableData = result.data.list
                this.pageTotal = result.data.total
                this.$message({ message: result.msg, type: 'success' })
            } else {
                this.$message({ message: result.msg, type: 'error' })
            }
        },
        clear() {
            this.query.rolename = ''
            this.search()
        }

    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 150px;
}

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inlineBox {
    display: inline-block;
}
</style>
